import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// vue3在setup语法糖下定义组价名称
import VueSetupExtend from "vite-plugin-vue-setup-extend";
// px转rem
import postcssPxtoRem from "postcss-pxtorem";

export default defineConfig({
  plugins: [vue(), VueSetupExtend()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 引入全局变量样式，注意路径要写对，~表示根目录
        additionalData: `@import "@/styles/variables.less";`,
      },
    },
    postcss: {
      plugins: [
        postcssPxtoRem({
          rootValue: 75, // 按照自己的设计稿修改 1920/10
          unitPrecision: 5, // 保留到5位小数
          selectorBlackList: ["ignore", "tab-bar", "tab-bar-item"], // 忽略转换正则匹配项
          propList: ["*"],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0,
          exclude: /(\/|\\)(node_modules)(\/|\\)vant(\/|\\)/,
        }),
      ],
    },
  },
});
